<template>
	<view class="ixmpParent">
		<view class="pop-view">
			<!-- 男女选择 -->
			<view class="nan-nv-select-view">
				<!-- 男 -->
				<view class="nan-head-view" @click="selectMan">
					<image class="head-view" src="../../static/icon-complete-info-man.png" />
					<view class="nan-select-view" >
						<image class="select-icon" :src="isCheckMan==1?'../../static/icon-complete-info-select.png'
						   :'../../static/icon-complete-info-unselect.png'"mode="scaleToFill" />
						<text class="select-desc">男</text>
					</view>
				</view>
				<!-- 女 -->
				<view class="nv-head-view" style="margin-left: 100rpx;" @click="selectWoman">
					<image class="head-view" src="../../static/icon-complete-info-woman.png" />
					<view class="nan-select-view">
						<image class="select-icon" :src="isCheckMan==0?'../../static/icon-complete-info-select.png'
						  :'../../static/icon-complete-info-unselect.png'" mode="scaleToFill" />
						<text class="select-desc">女</text>
					</view>
				</view>
			</view>
			<!-- 性别提示文字 -->
			<text class="xingbie-tip">*选择性别后不可更改</text>
			<!-- 姓名输入 -->
			<view class="input-parent-view">
				<!-- 姓氏 -->
				<view class="xingshi-view">
					<text class="xing-txt">姓</text>
					<input class="xing-input" placeholder="请输入姓" v-model="inputXing" />
				</view>
				<!-- 名字 -->
				<view class="xingshi-view" style="margin-left: 18rpx;">
					<text class="xing-txt">名</text>
					<input class="xing-input" placeholder="请输入名" v-model="inputMing" />
				</view>
			</view>
			<text class="compelet-btn" @click="completeInfo">完成</text>
		</view>
	</view>
</template>

<script>
	import request from '../../pages/index/request.js';
	export default {
		name: "input-xing-ming-pop",
		data() {
			return {
				inputXing: "",
				inputMing: "",
				isCheckMan: -1,
			};
		},

		methods: {
			//弹窗
			completeInfo: function() {
				if (!this.inputXing) {
					uni.showToast({
						title: "请输入姓",
						duration: 2000,
						icon: 'none',
					})
					return
				}
				if (this.inputXing.length > 2) {
					uni.showToast({
						title: "您填写的姓氏超过了两个字",
						duration: 2000,
						icon: 'none',
					})
					return
				}
				if (!this.inputMing) {
					uni.showToast({
						title: "请输入名",
						duration: 2000,
						icon: 'none',
					})
					return
				}
				if (this.inputMing.length > 4) {
					uni.showToast({
						title: "您填写的名字超过了四个字",
						duration: 2000,
						icon: 'none',
					})
					return
				}
				if (this.isCheckMan == -1) {
					uni.showToast({
						title: "请选择性别",
						duration: 2000,
						icon: 'none',
					})
					return
				}
				uni.showLoading({
					title: "加载中..."
				})
				this.modifyName()
			},
			modifyName: function() {
				var that = this;
				var userinfo = uni.getStorageSync("shiqin-user")
				if (userinfo.nickname && userinfo.PQD) {
					request.post('api/user/profile_user', {
						PQD_B: userinfo.PQD,
						set_key: "name",
						set_val: this.inputXing + "-" + this.inputMing,
						is_lunar: "",
					}).then(data => {
						that.modifyUserInfo()
					})
				} else {
					uni.setStorageSync("shiqin-user-xing", this.inputXing)
					uni.setStorageSync("shiqin-user-ming", this.inputMing)
					uni.setStorageSync("shiqin-user-sex", this.isCheckMan)
					uni.hideLoading()
					this.$emit('returnInputXingMingPop');
				}
			},
			modifyUserInfo: function() {
				var that = this;
				var userinfo = uni.getStorageSync("shiqin-user")
				request.post('api/user/profile_user', {
					PQD_B: userinfo.PQD,
					set_key: "gender",
					set_val: this.isCheckMan,
					is_lunar: "",
				}).then(data => {
					uni.hideLoading()
					this.$emit('returnInputXingMingDialog');
				})
			},
			selectMan: function() {
				this.isCheckMan = 1
			},
			selectWoman: function() {
				this.isCheckMan = 0
			},
		}
	}
</script>

<style>
	@import "input-xing-ming-pop.css";
</style>
